<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/comment/comment.css"/>
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <!-- 引用控制层插件样式 -->
    <link rel="stylesheet" href="./css/comment/zyUpload.css" type="text/css">

</head>
<body>
<div style="margin: 0 30%;">

    <div style="text-align: center;border-bottom: 1px dashed rgb(233, 233, 233);padding-bottom: 20px;">
        <span style="color: #999;font-size: 20px;">您的商品</span><strong style="margin-left: 5px;font-size: 20px;">评论</strong>
    </div>

    <div style="color: #999;margin-top: 20px">
        <span>产品号：</span><span id="resource-id">2004</span>
        <span style="margin-left: 60px">订单号：</span><span id="order-id">123457</span>
        <span style="margin-left: 60px">我的评分：</span><span id="star-score">5</span>
        <span style="display: none" id="resource-comment"></span>
    </div>


    <div>

            <div class="eval1">
                <span style="">你的评分：</span>
                <a href="javascript:void(0);"><img src="./img/extra/评星1.png" alt="1"/></a>
                <a href="javascript:void(0);"><img src="./img/extra/评星1.png" alt="2"/></a>
                <a href="javascript:void(0);"><img src="./img/extra/评星1.png" alt="3"/></a>
                <a href="javascript:void(0);"><img src="./img/extra/评星1.png" alt="4"/></a>
                <a href="javascript:void(0);"><img src="./img/extra/评星1.png" alt="5"/></a>

                <div style="position: relative;margin-top: -5px;float: right">
                    <img src="./img/extra/评星1.png" style="width: 14px;margin: 0" alt=""/>
                    <img src="./img/extra/评星1.png" style="width: 14px;margin: 0" alt=""/>
                    <img src="./img/extra/评星1.png" style="width: 14px;margin: 0" alt=""/>
                    <img src="./img/extra/评星1.png" style="width: 14px;margin: 0" alt=""/>
                    <img src="./img/extra/评星1.png" style="width: 14px;margin: 0" alt=""/>
                    <span style="margin-left: 3px;font-size: smaller;color: #999">满分评价：5/5</span>
                </div>
            </div>

            <div class="eval-text">
                <div id="demo" class="demo" style="margin-left: 0;"></div>
            </div>
    </div>



</div>

</body>
<script>
    function first() {
        var url = location.href;
        var fruitId = url.split("=")[1];
        $('#resource-id').html(fruitId);
    }
    first()
</script>
<script>
    $('.eval1>a').click(function(){

        var star = $(this).children().eq(0).attr("alt");
        for (var i=0; i<star; i++){

            $('.eval1>a').eq(i).children().eq(0).attr("src","./img/extra/评星1.png");
        }
        for (var j=star; j<5; j++){
            $('.eval1>a').eq(j).children().eq(0).attr("src","./img/extra/评星2.png");
        }
        $('#star-score').html(star);

    });
</script>
<!-- 引用核心层插件 -->
<script type="text/javascript" src="./js/comment/zyFile.js"></script>
<!-- 引用控制层插件 -->
<script type="text/javascript" src="./js/comment/zyUpload.js"></script>
<!-- 引用初始化JS -->
<script type="text/javascript" src="./js/comment/demo.js"></script>
</html>